{extend name="public/base"/}
{block name="style"}

{/block}
{block name="body"}
	<header class="ui-header">  
	    <div class="ui-icon-left">
	        <a href="javascript:history.back(-1)" class="ui-icon icon-back"></a>
	    </div>
	    <h1 class="ui-title">搜索</h1>
	    <div class="ui-icon-right">
	        <a href="javascript:;" class="ui-icon icon-menu"></a>
	    </div>
	    <!--导航-->
	    {block name="include"}{include file="public:dropnav" /}{/block}
	</header>
	<div class="weui-content">
		<div class="weui-search-bar" id="searchBar">
            <div class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required/>
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </div>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>
        <div class="result-wrap">
	    	<div class="weui_panel">
	    		<div class="weui-panel__list">
					<div class="no-result" style="display:none">暂无搜索结果</div>
				</div>
	    	</div>
	    </div>
        <div class="hot-search">
        	<div class="hd">热门搜索</div>
        	<ul class="shot-list">
			{volist name="hotsearch" id="vo"}
				<li><a href="javascript:;" class="hot-item">{$vo.title}</a></li>
			{/volist}
        	</ul>
        </div>
        <!--搜索历史-->
        <div class="so-history">
        	<div class="hd">历史记录</div>
        </div>
	</div>
{/block}
{block name="script"}
	<script type="text/javascript" src="__PUBLIC__/novel/js/jquery.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/novel/js/common.js"></script>
	<script type="text/javascript" src="/public/static/js/jquery.cookie.js"></script>
	<script type="text/javascript">
		$(function(){
			var $searchBar = $('#searchBar'),
				$searchResult = $('#searchResult'),
				$searchText = $('#searchText'),
				$searchInput = $('#searchInput'),
				$searchClear = $('#searchClear'),
				$searchCancel = $('#searchCancel');
				keyword = '{$keyword|default=''}';

			function hideSearchResult(){
				$searchResult.hide();
				$searchInput.val('');
			}
			function cancelSearch(){
				hideSearchResult();
				$searchBar.removeClass('weui-search-bar_focusing');
				$searchText.show();
			}

			$searchText.on('click', function(){
				$searchBar.addClass('weui-search-bar_focusing');
				$searchInput.focus();
			});
			$searchInput
				.on('blur', function () {
					if(!this.value.length) cancelSearch();
				})
				.on('input', function(){
					if(this.value.length) {
						$searchResult.show();
					} else {
						$searchResult.hide();
					}
				})
			;
			$searchClear.on('click', function(){
				hideSearchResult();
				$searchInput.focus();
			});
			$searchCancel.on('click', function(){
				cancelSearch();
				$searchInput.blur();
			});
		});
	</script>
	<script src="__PUBLIC__/novel/js/updown.js"></script>
	<script type="text/javascript">
		var sValue = new Array()
		$('#searchInput').bind('search', function () {
			var page = 0;
			// 每页展示10个
			var size =10;
			var keyword = $(this).val();
			var json1 = "";
			if (!$.cookie("searchKeyword")) {
					//第一次的时候需要初始化
					$.cookie("searchKeyword", "{keyword:\"" + keyword + "\"}", {expires: 7, path: '/'});
			} else {
					var json = eval("(" + $.cookie("searchKeyword") + ")");
					json1 = json1 + "[{keyword:\"" + keyword + "\"}";
					$(json).each(function () {
						if ((this.keyword.length>0 && this.keyword != keyword)) {
							json1 = json1 + ",{keyword:\"" + this.keyword + "\"}";
						}
					});
					json1=json1+"]";
					$.cookie("searchKeyword", json1, {expires: 7, path: '/'});
			}
		
			sValue.push($(this).val())//搜索值
			
			$('.dropload-down').remove();
			$('.weui-panel__list').empty();
			
			$('.weui_panel').dropload({
				scrollArea : window,
				autoLoad : true,//自动加载
				//上拉
				domDown : {
					domClass   : 'dropload-down',
					domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
					domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
					domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
				},
				//加载更多
				loadDownFn : function(me){
				 page++;
				 window.history.pushState(null, document.title, window.location.href);
				 var result = '';
					$.ajax({
						type: 'GET',
						url:'/searchajax?keyword='+sValue+'&page='+page,
						dataType: 'json',
						success: function(data){
						 var arrLen = data.lists.length;
							if(arrLen > 0){
								for(var i = 0; i < arrLen; i++){
									result+='<a href="'+data.lists[i].link+'" class="weui-media-box weui-media-box_appmsg">'
								+'<div class="weui-media-box__hd">'
									+'<img class="weui-media-box__thumb" src="'+data.lists[i].pic+'" alt="">'
								+'</div>'
								+'<div class="weui-media-box__bd">'
									+'<h4 class="weui-media-box__title">'+data.lists[i].title+'</h4>'
									+'<div class="weui-media-box__desc">'+data.lists[i].desc+'</div>'
									+'<div class="weui-media-box__ft">'
										+'<span class="box-cate">'+data.lists[i].cate+' | '+data.lists[i].status+'</span>'
										+'<span class="box-click">总点击：'+data.lists[i].click+'</span>'
									+'</div>'
								+'</div>'
							 +'</a>';
								}
							
							$('.hot-search').hide();
							// 如果没有数据
							}else{
								//result = '<div class="no-result">暂无搜索结果</div>'
								// 锁定
								me.lock();
								// 无数据
								me.noData();
							}
		
							// 为了测试，延迟1秒加载
							setTimeout(function(){
								$('.weui-panel__list').append(result);  
								// 每次数据加载完，必须重置
								me.resetload();
							},0);
						},
						error: function(xhr, type){
							alert('Ajax error!');
							// 即使加载出错，也得重置
							me.resetload();
						}
					});
				}
			});
			
		});
		$('#searchCancel').click(function(){
			$('.weui-panel__list').empty();
			$('.hot-search').show();
			$('.dropload-down').remove();
			$(".so-history .his-cell").each(function(){
				$(this).empty();
			});	
			//coding
			if($.cookie("searchKeyword")){
				var json = eval("(" + $.cookie("searchKeyword") + ")");
				var his = '';
				$('.so-history').show();
				$(json).each(function ()
				{
					if(this.keyword.length>0){
						his+= '<div class="his-cell"><div class="his-title">'+this.keyword+'</div><a href="javascript:" data-keyword="'+this.keyword+'" class="weui-icon-clear weui-icon-del"></a></div>';
					}
				});
				$('.so-history').append(his)
				
			}

			
		})
		$(document).on("click",'.weui-icon-del',function(){
			$(this).parent('.his-cell').remove();
			var key = $(this).attr('data-keyword');
			var json = eval("(" + $.cookie("searchKeyword") + ")");
			var json1 = "[";
			$(json).each(function (index) {
				if (this.keyword != key) {
					if(index ==0){
						json1 +="{keyword:\"" + this.keyword + "\"}";
					}else{
						json1 +=",{keyword:\"" + this.keyword + "\"}";
					}
				}
			});
			json1=json1+"]";
			console.log();
			$.cookie("searchKeyword", json1, {expires: 7, path: '/'});
			
			if ($('.weui-icon-del').length == 0) {
				$('.so-history').hide()
			}
		});

		$(function(){
			if($.cookie("searchKeyword")){
				var json = eval("(" + $.cookie("searchKeyword") + ")");
				var his = '';
				$('.so-history').show();
				$(json).each(function ()
				{
					if(this.keyword.length>0){
						his+= '<div class="his-cell"><div class="his-title hot-item">'+this.keyword+'</div><a href="javascript:" data-keyword="'+this.keyword+'" class="weui-icon-clear weui-icon-del"></a></div>';
					}
				});
				$('.so-history').append(his)
				
			}
		})
	</script>

	<script type="text/javascript">
	$(document).on("click",'.hot-item',function(){
			var result = '';
			var hot_title = $(this).text();
			$.ajax({
				type: 'GET',
				url:'/searchajax?keyword='+hot_title+'&page=1',
				dataType: 'json',
				success: function(data){
				var arrLen = data.lists.length;
					if(arrLen > 0){
						for(var i = 0; i < arrLen; i++){
							//if(data.lists[i].title = hot_title){
								
								result='<a href="'+data.lists[i].link+'" class="weui-media-box weui-media-box_appmsg">'
								+'<div class="weui-media-box__hd">'
									+'<img class="weui-media-box__thumb" src="'+data.lists[i].pic+'" alt="">'
								+'</div>'
								+'<div class="weui-media-box__bd">'
									+'<h4 class="weui-media-box__title box__title_focusing">'+data.lists[i].title+'</h4>'
									+'<div class="weui-media-box__desc">'+data.lists[i].desc+'</div>'
									+'<div class="weui-media-box__ft">'
										+'<span class="box-cate">'+data.lists[i].cate+' | '+data.lists[i].status+'</span>'
										+'<span class="box-click">总点击：'+data.lists[i].click+'</span>'
									+'</div>'
								+'</div>'
							 +'</a>';
							 //操作
							 $('.hot-search').hide();
							 $('#searchInput').val(hot_title)
							 $('#searchBar').addClass('weui-search-bar_focusing');
							 break;
							//}
							
						}
					// 如果没有数据
					}else{
						$('.no-result').show();
						setTimeout(function(){ 
							$('.no-result').hide();
						}, 1000);
						//result = '<div class="no-result">暂无搜索结果</div>'
					}
		
					$('.weui-panel__list').append(result);
				},
				error: function(xhr, type){
					alert('Ajax error!');
				}
			});
		})
	</script>
{/block}